<template>
  <div>
    <el-row>
      <el-col :span="14">工单项目列表</el-col>
      <el-col
        :span="10"
        align="right"
      >
        <el-button
          type="primary"
          @click="handleDataInsert('套餐选择')"
        >套餐选择</el-button>
        <el-button
          type="primary"
          @click="handleDataInsert('项目选择')"
        >项目选择</el-button>
        <el-button
          v-if="addProjectButton"
          type="primary"
          @click="handleDataInsert('新增项目')"
        >新增项目</el-button>
      </el-col>
    </el-row>
    <el-row v-if="workUserList.length > 0">
      <data-table
        :value="projectList"
        :total-count="projectList.length"
        :has-action="true"
        :table-column-attributes="tableColumnAttributes"
        :localPage="true"
      >
        <template #allNum>
          <div class="tabelAomut">
            <div>
              项目总金额：<span>￥{{ projectSum }}</span>
            </div>
            <div>
              项目优惠金额：<span>￥{{ discountedPrice }}</span>
            </div>
            <div>
              项目折后总金额：<span>￥{{ totalAmount }}</span>
            </div>
          </div>
        </template>
        <template #action="{ row, index }">
          <i
            class="el-icon-delete"
            title="删除"
            style="color: red; margin-left: 20px; cursor: pointer"

            @click="delTabelData(index)"
          ></i>
        </template>
      </data-table>
    </el-row>
    <el-dialog
      v-if="visible"
      :title="dialogTitle"
      :visible.sync="visible"
      :append-to-body="true"
      :width="'1000px'"
      @close="dialogClose"
    >
      <SelectProject
        v-if="dialogTitle == '项目选择'"
        @getList="changeListCheck"
      />
      <SelectionPackage
        v-if="dialogTitle == '套餐选择'"
        @getList="changeListCheck"
      />
      <AddProject
        :addType="false"
        v-if="dialogTitle == '新增项目'"
        @getList="changeListCheck"
      />
    </el-dialog>
  </div>
</template>
<script>
import DataTable from "@/components/DataTable";
import AddProject from "@/views/after-sale/systemManage/project/addProject"; //导入 新增项目 组件
import { SelectProject, SelectionPackage } from "@/components/index"; //导入组件库
import { getRefs, getUserOrTem } from "@/utils/index";
export default {
  components: {
    DataTable,
    AddProject,
    SelectionPackage,
    SelectProject,
  },
  props: {
    workOrderType: {
      type: Number,
    },
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    addProjectButton: {
      type: Boolean,
      default: true,
    },
    showTollTypeOrworkUserId: {
      type: Boolean,
      default: true,
    }
  },
  data () {
    return {
      visible: false,
      dialogTitle: "",
      projectList: [], //项目列表
      workUserList: [], //班组或员工列表
      tableColumnAttributes: [
        { name: "项目名", value: "projectName", type: "text" },
        {
          name: "项目工时",
          value: "workHours",
          type: "render",
          render: (row, value) => {
            return `${value}小时`;
          },
        },
        { name: "项目类型", value: "projectDictValue", type: "text" },
        {
          name: "工时费",
          value: "amount",
          type: "render",
          render: (row, value) => {
            return `￥${value}`;
          },
        },
        {
          name: "折扣",
          value: "discount",
          type: "inputNumber",
          maxFiled: 10,
          minFiled: 10,
          precision:1,
          precision:1,
        },
        {
          name: "折后金额",
          value: "discountAmount",
          type: "render",
          render: this.discountAmount,
        },
        {
          name: "状态",
          value: "status",
          type: "render",
          render: (row, value) => {
            return "未派工";
          },
          color: "color:#85ce61",
        },
        {
          name: "收费类型",
          value: "tollType",
          type: "select",
          options: [
            { index: 1, id: "自费", value: "自费" },
            { index: 2, id: "免费保养", value: "免费保养" },
            { index: 3, id: "索赔", value: "索赔" },
            { index: 4, id: "返工", value: "返工" },
            { index: 5, id: "保险", value: "保险" },
          ],
        },
        {
          name: "作业人员/班组",
          value: "workUserId",
          type: "select",
          options: [],
        },
        { name: "备注", value: "remark", type: "text" },
      ],
      totalAmount: 0, //折后总金额
      fittingRef: "", //fitting组件对象
    };
  },
  watch: {
    projectList: {
      deep: true,
      handler (newValue, oldValue) {
        this.totalAmount = 0;
        if (Array.isArray(newValue) && newValue.length > 0) {
          newValue.forEach((item, index) => {
            this.totalAmount += Number(this.discountAmount(item));
          });
        }
        this.totalAmount=this.totalAmount.toFixed(2)
        this.$emit("setTotalAmount");
      },
    },
    list: {
      deep: true,
      handler (nv, ov) {
        if (Array.isArray(nv) && nv.length > 0) {
          nv.map(item => {
            item.workHours = item.projectHours || item.workHours;
            item.projectDictValue = item.projectType;
            item.amount = item.projectPrice || item.amount;
          })
          this.projectList = nv;
        }
      }
    },
    showTollTypeOrworkUserId (nv, ov) {
      if (!nv) {
        this.showTollTypeOrworkUserIdFun();
      }
    }
  },
  computed: {
    discountedPrice(){
      return (this.projectSum-this.totalAmount).toFixed(2)
    },
    projectSum () {
      let sum = 0;
      this.projectList.forEach((item) => {
        //计算
        // sum += Number(item.workHours * item.amount);
        sum += Number(item.amount);
      });

      return sum.toFixed(2);
    }, //项目总金额
  },
  methods: {
    //计算折扣
    discountAmount (row, value) {
      // let sum = row.workHours * row.amount,
      let sum = row.amount,
        _amount = 0;
      if (row.tollType && (row.tollType == "免单" || row.tollType == "返工")) {
        _amount = 0;
      } else {
        _amount = sum;
        if (row.discount > 0) {
          _amount = sum * Number(row.discount / 10);
        }
      }
      row.shouldAmount = _amount;
      return _amount;
    },
    handleDataInsert (title) {
      this.visible = true;
      this.dialogTitle = title;
    },
    //表单删除
    delTabelData (index) {
      this.projectList.splice(index, 1);
    },
    //弹窗选择
    changeListCheck (list, partsList) {
      // const { projectDiscount } = JSON.parse(sessionStorage.getItem("login"));
      this.dialogClose();
      list.forEach((item) => {
        this.$set(item, 'discountAmount', item.amount);
        this.$set(item, 'discount', item.discount || 10);//ymc 20210330 田汉 要求权限默认都为10
        this.$set(item, 'tollType', '自费')
        // item.discountAmount = item.workHours * item.amount;
        // item.discount = projectDiscount;
        // item.tollType = "自费";
      });
      this.projectList = this.projectList.concat(list);
      if (this.workOrderType != 2 && partsList) {
        //非洗车单子
        if (!this.fittingRef) {
          this.fittingRef = getRefs("fitting", this.$parent);
        }
        this.fittingRef.changeListCheck(partsList);
      }
    },
    dialogClose () {
      this.visible = false;
    },
    showTollTypeOrworkUserIdFun () {
      this.tableColumnAttributes = this.tableColumnAttributes.filter(item => {
        if (item.value !== "tollType" && item.value !== 'workUserId') {
          return item
        }
      })
    }
  },
  async created () {
    let arry = await getUserOrTem();
    this.workUserList = arry;
    this.tableColumnAttributes[
      this.tableColumnAttributes.length - 2
    ].options = this.workUserList;
    this.projectList = this.list;
    if (!this.showTollTypeOrworkUserId) {
      this.showTollTypeOrworkUserIdFun();
    }

  },
};
</script>
<style lang="scss" scoped>
.greeColor {
  color: #85ce61;
}
</style>
